<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>订单核销</span>
    </div>

    <div class="container">
        <div class="chengetitle"  v-if="this.soul == '2'">
            <div style="display:flex;height:60px">
              <div class="chengeddh">
                <span class="chengeqm">优惠券码</span>
                <span class="chengehm">{{ddh}}</span>
              </div>
              
            </div>
        </div>

        <div v-if="false">
          <div class="chengetitle" v-if="false">
          <span class="chengeqm">券码详情</span>
          <div style="margin-top:10px">
              <table border="1" cellspacing="0px" cellpadding="0px" style="width:100%" rules="all" align="center" >
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">优惠券名称</td>   
                    <td class="chengetable2">测试门店</td>
                    <td class="chengetable1">状态</td>
                    <td class="chengetable3">进行中</td>
                  </tr> 
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">批次号</td>   
                    <td class="chengetable2">6666666666</td>
                    <td class="chengetable1">优惠券通道</td>
                    <td class="chengetable3">自营通道</td>
                  </tr> 
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">优惠券类型</td>   
                    <td class="chengetable2">满减券</td>
                    <td class="chengetable1">优惠内容</td>
                    <td class="chengetable3">满100减5元</td>
                  </tr> 
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">指定商户</td>   
                    <td class="chengetable2">湖北测试视频有效公司</td>
                    <td class="chengetable1">指定门店</td>
                    <td class="chengetable3">部分不可用，第一门店</td>
                  </tr> 
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">有效时间</td>   
                    <td class="chengetable2">2020-09-09至2020-09-09</td>
                    <td class="chengetable1">优惠券码</td>
                    <td class="chengetable3" style="color:#3D9EFF">6888888888</td>
                  </tr> 
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">券码状态</td>   
                    <td class="chengetable2">未核销</td>
                    <td class="chengetable1"></td>
                    <td class="chengetable3"></td>
                  </tr> 
                  
              </table>
          </div>
        </div>

         <div class="chengetitle">
          <span class="chengeqm">订单详情</span>
          <div style="margin-top:10px">
              <table border="1" cellspacing="0px" cellpadding="0px" style="width:100%" rules="all" align="center" >
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">商户名称</td>   
                    <td class="chengetable2">测试门店</td>
                    <td class="chengetable1">门店名称</td>
                    <td class="chengetable3">进行中</td>
                  </tr> 
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">操作员</td>   
                    <td class="chengetable2">6666666666</td>
                    <td class="chengetable1">订单号</td>
                    <td class="chengetable3">自营通道</td>
                  </tr> 
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">支付方式</td>   
                    <td class="chengetable2">满减券</td>
                    <td class="chengetable1">订单总额</td>
                    <td class="chengetable3">满100减5元</td>
                  </tr> 
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">抵扣金额</td>   
                    <td class="chengetable2">湖北测试视频有效公司</td>
                    <td class="chengetable1">实际支付金额</td>
                    <td class="chengetable3">部分不可用，第一门店</td>
                  </tr> 
                  <tr align="center" valign="center" style="height:20px;">         
                    <td class="chengetable1">支付成功时间</td>   
                    <td class="chengetable2">2020-09-09至2020-09-09</td>
                    <td class="chengetable1"></td>
                    <td class="chengetable3" ></td>
                  </tr> 
                
                  
              </table>
          </div>
        </div>

        <div style='width:300px;margin:0 auto;'>
          <el-button style="margin-right:20px;padding:15px 50px">取消</el-button>
          <el-button type="primary" style="padding:15px 40px">确认核销</el-button>
        </div>
        </div>

        <div  v-if="this.soul == '2'">

          <div class="chengecw">
            <div >
              <i class="el-icon-error  "  style=" color: red" ></i>
              <span class="chengeqm1" >优惠券码核销失败</span>
            </div>
            <div class="chengeqm2">
              <!-- 抱歉，当前券码不存在，请确认无误后重新输入 -->
                {{this.item}}
            </div>
          </div>

          <div class="chengecw" v-if="false">
            <div >
              <i class="el-icon-error"  style=" color: red" ></i>
              <span class="chengeqm1" >优惠券码核销失败</span>
            </div>
            <div class="chengeqm2">
              抱歉，当前优惠券码已过期，无法使用；使用期限为：2020年7月8日-2021年6月7日
            </div>
          </div>

          <div class="chengecw" v-if="false">
            <div >
              <i class="el-icon-error"  style=" color: red"></i>
              <span class="chengeqm1" >优惠券码核销失败</span>
            </div>
            <div class="chengeqm2">
              抱歉，当前优惠券码不满足使用日期条件，无法使用；使用期限为：2020年7月8日-2021年6月7日
            </div>
          </div>

          <div class="chengecw" v-if="false">
            <div >
              <i class="el-icon-error"  style=" color: red"></i>
              <span class="chengeqm1" >优惠券码核销失败</span>
            </div>
            <div class="chengeqm2">
              抱歉，当前优惠券码不支持在当前门店使用；
            </div>
          </div>

          <div class="chengecw" v-if="false">
            <div >
              <i class="el-icon-error" style=" color: red" ></i>
              <span class="chengeqm1" >优惠券码核销失败</span>
            </div>
            <div class="chengeqm2">
              抱歉，当前优惠券码不满足【满100减10元】条件，无法使用；
            </div>
          </div>

          <div class="chengecw" v-if="false">
            <div >
              <i class="el-icon-error" style=" color: red" ></i>
              <span class="chengeqm1" >优惠券码核销失败</span>
            </div>
            <div class="chengeqm2">
              抱歉，当前优惠券码已核销，无法重复使用；
            </div>
          </div>

        <div class="chengesdsd">
          <el-button type="primary" @click="chengego" style="padding:15px 50px">重新核销</el-button>
        </div>
      </div>

        <div style="height:340px" v-if="this.soul == '1'">
          <div class="chengecw1">
              <div >
                <i class="el-icon-success" style=" color: #3F9EFF" ></i>
                <span  class="chengeqm1" >优惠券码核销成功</span>
              </div>
              <div class="chengeqm2">
                <span @click="chengefoxq" style="color: #3F9EFF;margin-right:10px;cursor: pointer">查看核销详情</span>
                <span style="color: #3F9EFF;">{{this.countDown}}</span>秒后自动返回订单核销
              </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { couponList} from "@/api/api";
export default {
  name: "verification",
  data: function() {
    return {
       soul:'',
       ddh:'',
       countDown:0,
       timers:null,
       item:''
    };
  },
  created() {
    this.$store.dispatch("getNewNum", 6);
    console.log('tag', '111')
    this.soul = this.$route.query.suol
    this.ddh = this.$route.query.ddh
    this.item = this.$route.query.return_msg

    if(this.$route.query.suol == '1'){
   
      this.chengecg()
    }else{

    }
  },
  methods: {
 
    chengego(){
       this.$router.replace({
        path: "/CodeVerification"
      });
    },
    chengefoxq(){
      clearInterval(this.timers)
       this.$router.push({
                    path: "/cxparticulars",
                    query: {
                        channelOrderNo: this.$route.query.order_no
                      }
                  });

    },
    chengecg(){
       
      const count = 5
      this.countDown = count
      this.timers = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
        } else {
          clearInterval(this.timers)
          // this.$router.push('/');
          // this.$router.push('/login')
           this.$router.replace({
        path: "/CodeVerification"
      });
        }
      }, 1000)

    }
 
  },
   watch: {
            $route() {
            //解决方法监听路由变化并执行相应方法即可
             
                if (this.$route.query.ishit == undefined) {
                      this.soul = this.$route.query.suol
                      this.ddh = this.$route.query.ddh
                      this.item = this.$route.query.return_msg
                      if(this.$route.query.suol == '1'){
                    
                        this.chengecg()
                      }else{

                      }
                     
                   
                } else {
                      
                    // this.listdata(this.$store.state.keyword, this.$route.query.ishit);
                }
            },
        },
 
};
</script>
<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  
}
.chengetitle{
  width: 700px;
  margin:  auto;
  margin-bottom: 40px;
}
.chengeddh{
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.chengeqm{
  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    margin-right: 10px;
}
.chengered{
  color: red;
}
.chengehm{
  font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
}
.chengetable1{
  width:20%;
  background:rgba(170, 170, 170, 0.23137254901960785);
  height: 30px;
  
}
.chengetable2{
  width:30%;
   height: 30px;
}
[class*=" el-icon-"], [class^=el-icon-]{
  font-size: 30px;
  
}
.chengecw{
  width: 700px;
  border: 1px solid red;
  background: rgba(236, 128, 141, 0.29411764705882354);
  margin-left: 260px;
  margin-top: 150px;
  padding-left: 15px;
  padding-bottom: 15px;
}
.chengecw1{
  width: 700px;
  border: 1px solid rgba(63, 158, 255, 1);
  background: rgba(63, 158, 255, 0.23137254901960785);
  margin-left: 260px;
  margin-top: 150px;
  padding-left: 15px;
  padding-bottom: 15px;
}
.chengeqm1{
   font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    margin-left: 10px;
 
}
.chengeqm2{
  padding-left: 45px;
  font-size: 13px;
}
.chengesdsd{
  width: 300px;
  margin: 0 auto;
  height: 210px;
  line-height: 210px;
}

</style>